<template>
  <div class="index">
    <div class="header">
      <div class="logo">
          <span class="iconfont iconnew"></span>
      </div>
      <div class="search" @click="$router.push({name:'search'})">
          <van-icon name="search" />
          <span>搜索商品</span>
      </div>
      <div class="user" @click="$router.push({path:`/personal/${id}`})">
          <van-icon name="manager-o" />
      </div>
    </div>
    <!-- active：当前被激活的标签项的索引 -->
    <van-tabs v-model="active" sticky swipeable>
      <van-tab v-for="(value,index) in cateList" :key='index' :title="value.name"  >
        <van-list
          v-model="value.loading"
          :finished="value.finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check='false'
          :offset="10"
        >
        <van-pull-refresh v-model="value.isLoading" @refresh="onRefresh">
          <articleblock v-for="(v,i) in value.postList" :key='i' :post='v'></articleblock>
        </van-pull-refresh>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getCateList } from '@/apis/category.js'
import { getArticleList } from '@/apis/article.js'
import articleblock from '@/components/articleblock.vue'
export default {
  data () {
    return {
      id:'',
      active:localStorage.getItem('hm_toutiao')?1:0,
      cateList:[]
    }
  },
  components: {
    articleblock
  },
  methods: {
    // 下拉刷新的触发事件
    onRefresh(){
      // 下拉刷新所需要做的事情
      // 页码重置 为1  + 数据清空 + 重置finished + 重置isloading
      this.cateList[this.active].pageIndex = 1
      this.cateList[this.active].postList.length = 0
      this.cateList[this.active].finished = false
      // console.log(1);
      this.init()
    },
    // 上拉加载更多数据
    onLoad(){
      this.cateList[this.active].pageIndex++
      // console.log(2);
      this.init()
    },
    async init(){
         // 获取默认栏目（头条）的新闻数据
      let list  = await getArticleList({
      category:this.cateList[this.active].id,
      pageIndex:this.cateList[this.active].pageIndex,
      pageSize:this.cateList[this.active].pageSize
    })
    // console.log(list);
    // 将获取到的文章列表数据存储到当前栏目的postList中
    this.cateList[this.active].postList.push(...list.data.data)
    // 将上拉加载组件的loading重置位false,如果没有重置为False,则不能再进行上拉加载了，因为上一次的加载还没有完成
    this.cateList[this.active].loading = false
    // 重置下拉刷新
    this.cateList[this.active].isloading = false
    // 如果没有数据了，就应该将上拉组件的finished重置位true
    // 没有数据的判断：这次获取的数据的条数小于pageSize
    if(list.data.data < this.cateList[this.active].pageSize){
      this.cateList[this.active].finished = true
    }
    // console.log(this.cateList);
    }
  },
  watch:{
    active(){
      console.log(3);
      // console.log(this.active);
      // 我们需要重新加载当前栏目的新闻数据
      // 注意一个细节：只有当前栏目没有文章数据的时候我们才需要重新加载数据，否则直接展示
      if(this.cateList[this.active].postList.length == 0){
        this.init()
      }
    }
  },
  async mounted () {
    if (localStorage.getItem('hm_toutiao_userinfo')){
      this.id = JSON.parse(localStorage.getItem('hm_toutiao_userinfo')).user.id
    }
    // 获取所有栏目分类数据,先判断是否有本地存储，如果有则从本地存储中获取栏目数据，如果没有则发起axios请求
    if(localStorage.getItem('hm_toutiao_has_cate')){
      this.cateList = JSON.parse(localStorage.getItem('hm_toutiao_has_cate'))
      // 细节说明，栏目的本地存储数据中没有关注和头条，所以根据用户登录状态动态添加关注和头条
      if(localStorage.getItem('hm_toutiao')){
        this.cateList.unshift({id:0,name:'关注'},{id:999,name:'头条'})
      }else{
        this.cateList.unshift({id:999,name:'头条'})
      }
    }else{
      let result = await getCateList()
      console.log(result);
      this.cateList = result.data.data
    }

    document.querySelector('.van-sticky').onclick = (e)=>{
      if(e.target.className == 'van-sticky'){
        this.$router.push({path:'/cateManager'})
      }
    }

    // 对栏目数据进行改造，以满足当前页面的业务需求
    // 具体的改造有：添加一个数组用于存储当前栏目的文章列表数据
    // forEach map filter
    this.cateList = this.cateList.map(v=>{
      return{
        ...v,
        postList:[],    // 展开对象，我要这个对象的所有成员
        pageIndex:1,    // 这个栏目 当前的页码
        pageSize:5,    //这个栏目每页所显示的记录数  
        loading:false,  // 这个栏目的加载状态
        finished:false , // 这个栏目的数据是否完全加载完毕
        isLoading:false   //下拉刷新的状态，默认没有处理下拉刷新的状态
      }
    })
    this.init()
    // 获取默认栏目（头条）的新闻数据
    // let list  = await getArticleList({
    //   category:this.cateList[this.active].id,
    //   pageIndex:this.cateList[this.active].pageIndex,
    //   pageSize:this.cateList[this.active].pageSize
    // })
    // console.log(list);
    // // 将获取到的文章列表数据存储到当前栏目的postList中
    // this.cateList[this.active].postList = list.data.data
    // console.log(this.cateList);
  }
}
</script>

<style lang="less" scoped>
/deep/.van-sticky{
  padding-right: 50px;
  &::after{
    content: '+';
    position: absolute;
    width: 51px;
    height: 44px;
    background-color: #fff;
    top: 0;
    right: 0;
    text-align: center;
    line-height: 42px;
    font-size: 35px;
  }
}
.index {
  .header {
    height: 40px;
    display: flex;
    justify-content: space-between;
    background-color: #f00;
    align-items: center;
    color: #fff;
  }
  .search{
    flex: 1;
    height: 30px;
    background-color: rgba(255,255,255,0.4);
    border-radius: 15px;
    text-align: center;
    line-height: 30px;
    .van-icon{
      font-size: 16px;
    }
  }
  .van-icon{
    font-size: 24px;
    padding: 0 10px;
  }
  .iconfont{
    font-size: 50px;
    padding: 0 10px;
  }
}
</style>